@charset "UTF-8";
@import "common/var";
@import "mixins/mixins";
@import "mixins/utils";
@import "mixins/button";

.v-table__actions {
  @include b(button) {
    @include m(primary) {
      @include button-variant($--color-primary, transparent, transparent);
    }

    @include m(success) {
      @include button-variant($--color-success, transparent, transparent);
    }

    @include m(warning) {
      @include button-variant($--color-warning, transparent, transparent);
    }

    @include m(danger) {
      @include button-variant($--color-danger, transparent, transparent);
    }

    @include m(info) {
      @include button-variant($--color-info, transparent, transparent);
    }

    >i {
      font-size: 16px;
    }
  }
}

@include b(card) {
  @include m(has-heading) {
    overflow: initial;
    margin-top: 30px;
    padding: 0 15px;

    &.success {
      @include e(header) {
        background-color: #4caf50;
        border-color: #4caf50;
      }
    }

    &.warning {
      @include e(header) {
        background-color: #ff9800;
        border-color: #ff9800;
      }
    }

    &.danger {
      @include e(header) {
        background-color: $--color-danger;
        border-color: $--color-danger;
      }
    }

    &.info {
      @include e(header) {
        background-color: #00cae3;
        border-color: #00cae3;
      }
    }

    @include e(header) {
      box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12) !important;
      position: relative;
      top: -30px;
      color: #fff;
      border-radius: 4px;

      .el-button {
        color: #fff;

        &:hover,
        &:focus {
          color: #fff;
        }
      }
    }

    @include e(body) {
      padding-top: 0;
    }
  }
}


/* Messagebox
---------------------------------------------------------------*/
@include b(message-box) {
  @include e(wrapper) {
    &:after {
      vertical-align: top;
    }
  }

  &.v-message-box {
    border-radius: 0;
    padding: 0;
    position: relative;
    top: 100px;
    padding-bottom: 24px;

    .el-message-box__content {
      padding: 32px 32px 24px;
    }

    &.no-heading {
      .el-message-box__header {
        display: none;
      }
    }
  }
}

/* Messagebox
---------------------------------------------------------------*/

$--color-message-content: rgba(0, 0, 0, .65);

@include b(message) {
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);

  @include m(info) {
    .el-message__content {
      color: $--color-message-content;
    }
  }

  @include m(success) {
    background-color: #fff;
    border: none;

    .el-message__content {
      color: $--color-message-content;
    }
  }

  @include m(warning) {
    background-color: #fff;
    border: none;

    .el-message__content {
      color: $--color-message-content;
    }
  }

  @include m(error) {
    background-color: #fff;
    border: none;

    .el-message__content {
      color: $--color-message-content;
    }
  }
}


@include b(pagination) {
  font-weight: normal;
}

@include b(notification) {
  background: rgba(0, 0, 0, .8);
}

@include b(upload) {
  @include m(picture-card) {
    border-radius: 0;
  }
}


@include b(upload-list) {
  @include m(picture-card) {
    .el-upload-list__item {
      border-radius: 0;
    }
  }
}

@include b(upload-list) {
  @include e(item) {
    border-radius: 0;
  }
}

@include b(upload-dragger) {
  border-radius: 0;

}